<template>
  <view class="home_tab">
    <view class="home_title">
      <view class="title_inner">
        <uni-segmented-control
          :current="current"
          :values="title"
          @clickItem="onClickItem"
          style-type="text"
          active-color="#268bd2"
        ></uni-segmented-control>
      </view>
      <!-- 放大镜图标 -->
      <view class="iconfont iconsearch"></view>
    </view>
    <view class="home_content">
      <view class="content">
        <view v-if="current === 0">
          <home-Recommend></home-Recommend>
        </view>
        <view v-if="current === 1">
          <home-Category></home-Category>
        </view>
        <view v-if="current === 2">
          <home-New></home-New>
        </view>
        <view v-if="current === 3">
          <home-Album></home-Album>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 导入uniui的组件
import {
  uniBadge,
  uniSegmentedControl
} from '@dcloudio/uni-ui'
// 导入自定义组件
import homeRecommend from './home-recommend'
import homeCategory from './home-category'
import homeNew from './home-new'
import homeAlbum from './home-album'

// 组件注册
export default {
  components: {
    uniBadge,
    'home-Recommend': homeRecommend,
    'home-Category': homeCategory,
    'home-New': homeNew,
    'home-Album': homeAlbum,
    uniSegmentedControl
  },
  data () {
    return {
      items: [
        { title: '推荐' },
        { title: '分类' },
        { title: '最新' },
        { title: '专题' }
      ],
      current: 0
    }
  },
  methods: {
    onClickItem (e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    async getnew () {
      const res = await this.$request({ url: '/image/v1/vertical/category' })
    }
  },
  computed: {
    title () {
      return this.items.map(item => item.title)
    }
  },
  onLoad () {
    this.getnew()

  }
}
</script>


<style lang="scss" scoped>
.home_tab {
  .home_title {
    position: relative;
    .title_inner {
      margin: 0 auto;
      width: 60%;
    }
    .iconfont {
      position: absolute;
      top: 25%;
      right: 5%;
    }
  }
}
</style>